$(function () {
    // 全局变量 分类的数据
    var CateDatas;
    // 左侧的滚动条对象
    var LeftScorll;

    init();

    function init() {
        renderCategories();
        eventList();
    }

    function eventList() {
        // 绑定 左侧菜单的点击事件tap
        // 标签如果是动态生成
        // 建议使用委托的方式来绑定 给一个一直存在的父容器绑定tap点击事件 给它里面的zi容器来触发
        $('.left').on('tap', "li", function () {
            // 点击选中其他排他
            $(this).addClass('active').siblings().removeClass('active');
            // 获取被点击的li标签的索引
            // 注意：index()方法只有jq或zepto才有 js原生方法里面没有
            var index = $(this).index();
            // 渲染右侧
            renderRight(index);
            // 点击菜单往上置顶
            LeftScorll.scrollToElement(this);
        });

        // 屏幕的宽度改变的事件
        window.onresize = function () {
            setFont();
        }
    }

    // 渲染数据
    // 数据的来源不一定是发送请求 有可能使用本地存储
    function renderCategories() {
        // 先判断本地存储有没有数据
        // 会话还是使用永久
        // 规定key “cates”

        // 判断永久存储中有没有旧的分类数据 默认值null
        if (localStorage.getItem('cates')) {
            // 先取出旧的数据 字符串的类型
            var catesStr = localStorage.getItem('cates');
            // 解析成对象 | 数组类型
            var localData = JSON.parse(catesStr);

            // 判断数据有没有过期 过期时间为自定义10秒
            if (Date.now() - localData.time > 10 * 1000) {
                // 过期
                getCategories();
            } else {
                // 还没过期
                CateDatas = localData.data;
                renderLeft();
                renderRight(0);
            }
        } else {
            // 重新发送请求
            getCategories();
        }
    }

    // 根据左侧被选中的索引来渲染右侧的内容
    function renderRight(index) {
        var childrens = CateDatas[index].children;
        var righHtml = template('rightTpl', {
            data: childrens
        });
        $('.right').html(righHtml);

        /** 初始化左侧的滚动条 */
        // 获取要加载的图片的长度
        var times = $('.right img').length;
        $('.right img').on("load", function () {
            times--;
            if (times == 0) {
                var rightScroll = new IScroll(".right");
            }
        })
    }

    // 使用全局数据的变量渲染左侧
    function renderLeft() {
        // 渲染左侧的菜单
        var leftHtml = template('leftTpl', {
            data: CateDatas
        });
        $('.left').html(leftHtml);

        // 初始化左侧的滚动条
        LeftScorll = new IScroll('.left');
    }
    /**
     * 发送请求获取数据
     */
    function getCategories() {
        $.get("categories", function (result) {
            if (result.meta.status == 200) {
                // 给全局变量赋值，后面再使用到接口的返回的数据的时候，全部都是
                // 通过全局变量来使用
                CateDatas = result.data;
                // 存入分类页面的数据 注意要转json字符串
                var obj = {
                    data: CateDatas,
                    // 返回1970到现在时间戳 mm...
                    time: Date.now()
                }
                var jsonCateDatas = JSON.stringify(obj);

                localStorage.setItem('cates', jsonCateDatas);
                renderLeft();
                renderRight(0);
            }
        });
    }
    setFont();

    function setFont() {  
         // 要计算的fontsize的大小=  基础值 *  要适配的屏幕的宽度/   设计稿的宽度 （640）
        // 基础值 100px
        var baseVal = 100;
        // 设计宽度
        var pageWidth = 320;
        // 要适配的屏幕的宽度 = 当前的屏幕的宽度
        var screenWidth = document.querySelector('html').offsetWidth;
        // 要设置的字体的大小
        var fz = baseVal * screenWidth / pageWidth;
        // 把字体的大小设置到html标签中
        document.querySelector('html').style.fontSize = fz + "px";
    }
});